<template>
  <div class="application-record" ref="container">
    <!-- <Collapse>
      <CollapsePanel header="元数据基本信息" :loading="" :showEmpty=""> -->
    <div class="collapse-container">
      <a-collapse>
        <a-collapse-panel header="看板信息">
          <a-form-model ref="form" :model="form" v-bind="layout" :rules="rules">
            <a-col v-bind="colLayout">
              <a-form-model-item label="名称">
                <span>{{data.name}}</span>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="colLayout">
              <a-form-model-item label="描述">
                <span>{{data.description}}</span>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="colLayout">
              <a-form-model-item label="发布状态">
                <span>{{data.status === 1 ? '已上线' : '未上线'}}</span>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="colLayout">
              <a-form-model-item label="创建时间">
                <span>{{data.createTime}}</span>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="colLayout">
              <a-form-model-item label="修改时间">
                <span>{{data.updateTime}}</span>
              </a-form-model-item>
            </a-col>
            <a-col v-bind="colLayout">
              <a-form-model-item label="修改人">
                <span>{{data.updateUser}}</span>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-collapse-panel>
        <a-collapse-panel header="申请记录">
          <a-table
            bordered
            rowKey="id"
            style="width: 100%"
            :scroll="{ x: '100%', y: 400 }"
            :columns="table.columns"
            :data-source="tableData"
            :loading="table.loading"
            :pagination="table.pagination"
          >
          </a-table>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <a-affix :offsetBottom="-1" :target="() => this.$refs.container" @change="affixedChange" :style="{ width: '100%' }">
      <div class="buttonGroup" :class="{ affixShadow: affixed }">
        <a-button @click="$emit('retreat')">返回</a-button>
      </div>
    </a-affix>
  </div>
</template>

<script>
import { Affix as aAffix } from "ant-design-vue"
import { getApplyHistorical, getDashboardById } from "@/api/multidimensionalAnalysis"

const layout = {
  labelCol: {
    span: 8,
    xl: 4
  },
  wrapperCol: {
    span: 16,
    xl: 20
  }
}
const colLayout = {
  span: 24,
  md: 12
}
export default {
  components: {
    aAffix
  },
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form: {},
      layout,
      affixed: false,
      colLayout,
      searchParams: {
        current: 1,
        size: 20,
        total: 0,
        id: 0
      },
      rules: {},
      tableData: [],
      table: {
        columns: [
          {
            dataIndex: "resourceName",
            title: "标题",
            width: 200
          },
          {
            dataIndex: "applyType",
            width: 200,
            title: "申请类型",
          },
          {
            dataIndex: "createUser",
            title: "申请人",
            width: 100,
          },
          {
            dataIndex: "createTime",
            title: "申请时间",
            width: 100,
          },
          {
            dataIndex: "deptName",
            title: "审批人",
            width: 160,
          },
          {
            dataIndex: "updateTime",
            title: "审批时间",
            width: 120,
          },
          {
            dataIndex: "auditOpinion",
            title: "审批结果",
            width: 160,
          },
          // {
          //   dataIndex: 'modifyUser',
          //   title: '创建人',
          //   width: 120,
          // },
          // {
          //   key: 'action',
          //   title: '操作',
          //   width: 300,
          //   fixed: 'right',
          //   scopedSlots: { customRender: 'action' }
          // },
        ],
        // data: new Array(40).fill(1).map((val, key) => ({
        //   id: key,
        //   name: `测试${key}`
        // })),
        loading: false,
        pagination: {
          // hideOnSinglePage: true,
          pageSize: 20, // 默认每页显示数量
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ["20", "50", "100"], // 每页数量选项
          showTotal: (total) => `共${total}条`, // 显示总数
          onShowSizeChange: this.pageChange, // 改变每页数量时更新显示
          onChange: this.pageChange, // 点击页码事件
          total: 0, // 总条数
          current: 1,
        }
      },
    }
  },
  created() {
    console.log(this.data)
    this.searchParams.id = this.data.id
    this.getApplyHistorical()
  },
  methods: {
    getDashboardById() {
      const {id} = this.data
      getDashboardById(id)
      .then(res => {
        if(res.errorCode === 0) {

        } else {
          this.$message.error(res.msg)
        }
      })
      .catch(err => {
        this.$message.error(err)
      })
    },
    getApplyHistorical() {
      const { current, size, id } = this.searchParams
      const params = {
        current,
        size,
        id
      }
      getApplyHistorical(params)
      .then(res => {
        if (res.errorCode === 0) {
          this.tableData = res.data.records
        } else {
          this.$message.error(res.msg)
        }
      })
      .catch(err => {
        this.$message.error(err)
      })
    },
    affixedChange(val) {
      this.affixed = val
    },
    pageChange(page, pageSize) {

    }
  },
  computed: {
    tableHeight() {
      const height = this.$store.state.clientHeightStore.clientHeight - 450
      return height < 200 ? 200 : height
    },
  }
}
</script>

<style lang="less" scoped>
.application-record{
  background: #ffffff;
  border-radius: 2px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  .collapse-container{
    min-height: calc(100% - 52px);
    width: 100%;
    padding: 10px 12px 0 12px;
    box-sizing: border-box;
  }
}
.buttonGroup {
  box-sizing: border-box;
  background: #ffffff;
  padding: 10px 12px;
  text-align: right;
}
.affixShadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/deep/ .ant-col{
  margin: 0!important;
  padding: 0!important;
}
</style>
